<template>
  <div class="article-meta" v-if="userInfo">
    <router-link :to="'/profile/' + userInfo.username + '/myarticles'"><img :src="userInfo.image"/></router-link>
    <div class="info">
      <a href="javascript:;" class="author">{{userInfo.username}}</a>
      <span class="date">{{ user.createdAt | formatRelativeTime}}</span>
    </div>
    
      <span class="ng-scope editArt" v-if="userInfo.username === user.username">
        <router-link :to="'/editor/' + $route.params.aid" class="btn btn-outline-secondary btn-sm" href="#/editor/test11-bem2ei">
          <i class="ion-edit"></i> Edit Article
        </router-link>
        <!-- disabled -->
        <button class="btn btn-outline-danger btn-sm" @click.prevent="deleteArticle">
          <i class="ion-trash-a"></i> Delete Article
        </button>
      </span>
    

      <span v-else>
        <button class="btn btn-sm" :class="userInfo.following ? 'btn-secondary' : 'btn-outline-secondary'" @click.prevent="isFollowUser">
          <i class="ion-plus-round"></i>
          &nbsp; {{userInfo.following ? 'UnFollow ' + userInfo.username : 'Follow ' + userInfo.username}} <span class="counter"></span>
        </button>
          &nbsp;&nbsp;
        <button class="btn btn-sm btn-outline-primary" @click.prevent="favoritePost" v-if="!article.favorited">
            <i class="ion-heart"></i>
            &nbsp; Favorite Post <span class="counter">({{article.favoritesCount}})</span>
        </button>
        <button class="btn btn-sm btn-primary" v-else @click.prevent="unFavoritePost">
          <i class="ion-heart"></i> 
          <span class="ng-binding ng-scope">&nbsp; Unfavorite Article</span>
          <span class="counter">({{article.favoritesCount}})</span>
        </button>
      </span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {reqDeleteArticle, reqFollowArticle} from '../../../api/article'
import {reqGetUserInfo, reqFollowAuthor, reqUnFollowAuthor} from '../../../api/profile'
export default {
  name: "",
  data() {
    return {
      userInfo:{},
      Favorite: null
    };
  },
  methods: {
    // 获取用户信息
    async getUserInfo(){
      const result = await reqGetUserInfo(this.article.author.username)
      this.userInfo = result.profile
    },
    // 删除文章
    async deleteArticle(){
      let flag = confirm('您确定要删除吗?')
      if(flag){
        await reqDeleteArticle(this.$route.params.aid)
        // 跳转到首页
        this.$router.replace('/')
      }
    },

    // 关注作者
    async isFollowUser(){
      let isFollow = this.userInfo.following
      if(isFollow){
        const result = await reqUnFollowAuthor(this.userInfo.username)
        this.userInfo = result.profile
        console.log(isFollow)
        alert('取关成功')
      }else{
        const result = await reqFollowAuthor(this.userInfo.username)
        this.userInfo = result.profile
        alert('关注成功')
        console.log(isFollow)
      }
    },

    // 收藏文章
    async favoritePost(){
      this.$emit('favoritePost')
    },

    // 取消收藏文章
    async unFavoritePost(){
      this.$emit('unFavoritePost')
    }
  },
  watch: {
    article(){
      this.getUserInfo()
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  props:{
    article:{
      type: Object,
      required: true
    }
  }
};
</script>
<style lang="less" scoped>
.article-meta{
  .editArt{
    a{
      margin-right: 10px;
    }
  }
  .btn-secondary, .btn-outline-secondary{
    margin-right: 10px;
  }
}
</style>
